<template>
  <!-- 表单收集页 -->
  <div class="body" ref="body">
    <ManageNav class="topNav"></ManageNav>
    <div class="managePart">
      <section class="nav">
        <div class="link" v-for="(item, idx) in fcs" :class="{ check: idx == nowBusiness }"
          @click="checkRoute(item.path, idx)">{{ item.meta.title }}</div>
      </section>
      <router-view v-slot="{ Component }" class="childView">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </div>
  </div>
</template>

<script setup>
import ManageNav from '@/components/ManageNav'
import { RouterView } from 'vue-router';
import { computed, onMounted, reactive, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
let body = ref()

// 跳转路由
const checkRoute = (path, idx) => {
  if (nowBusiness.value != idx) {
    nowBusiness.value = idx
    $router.push({
      path: `/manage/${path}`,
      query: $route.query
    });
  }
}

// 路由
const $route = useRoute()
const $router = useRouter();
// nav选中路由（中间部分）
const nowBusiness = ref(0);
// 获取 manage 路由下的所有子路由
const manageRoutes = computed(() => {
  const manageRoute = $router.options.routes.find(route => route.path === '/manage');
  return manageRoute?.children?.filter(route => route.meta?.title) || [];
});
// 当前业务的所有子路由
const fcs = reactive(manageRoutes.value)

onMounted(() => {
  const matchedRoute = fcs.find(item => $route.fullPath.startsWith(`/manage/${item.path}`));
  if (matchedRoute) {
    nowBusiness.value = fcs.indexOf(matchedRoute);
  }
  body.value.style.height = screen.height * 0.8 + 'px'
  body.value.style.width = screen.width * 0.8 + 'px'
})
</script>

<style lang="scss" scoped>
@use '@/styles/manage-scrollbar.scss'
</style>